<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿钢琴图片切换</title>
    <style>
        #viewer {
            width: 700px;
            margin: auto;
        }

        #nav {
            width: 200px;
            float: left;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        #nav li {
            width: 200px;
            height: 100px;
            padding: 0;
        }

        #nav li a {
            display: block;
            width: 100%;
            height: 100%;
            text-indent: -9999px;
            overflow: hidden;
            background: url(./img/GitHub头像.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #nav li.thumb2 a {
            background: url(./img/微信图片_20250507170141.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #nav li.thumb3 a {
            background: url(./img/微信图片_20250507170143.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #nav li.thumb4 a {
            background: url(./img/微信图片_20250507170144.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #nav li.thumb5 a {
            background: url(./img/微信图片_202505071701441.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #panels {
            width: 500px;
            height: 500px;
            overflow: hidden;
            position: relative;
            float: left;
        }

        #slider {
            width: 2500px;
            height: 500px;
        }

        #slider div {
            float: left;
            position: relative;
        }

        #slider div img {
            width: 500px;
            height: 500px;
        }

        #slider p {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            font: 16px "Trebuchet MS";
            margin: 0;
            width: 90%;
            height: 45px;
            padding: 5px 5% 10px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="viewer">
        <!-- 左侧导航栏 -->
        <ul id="nav">
            <li class="thumb1"><a href="#panel1"></a></li>
            <li class="thumb2"><a href="#panel2"></a></li>
            <li class="thumb3"><a href="#panel3"></a></li>
            <li class="thumb4"><a href="#panel4"></a></li>
            <li class="thumb5"><a href="#panel5"></a></li>
        </ul>

        <!-- 右侧图片展示 -->
        <div id="panels">
            <div id="slider">
                <div id="panel1">
                    <img src="./img/GitHub头像.jpg" alt="">
                    <p>世界上一成不变的东西，，只有"任何事物都在不停变化"这条真理</p>
                </div>
                <div id="panel2">
                    <img src="./img/微信图片_20250507170141.jpg" alt="">
                    <p>过放荡不拘的生活，容易的想顺水推舟，但是要结识良师益友却难如登天</p>
                </div>
                <div id="panel3">
                    <img src="./img/微信图片_20250507170143.jpg" alt="">
                    <p>人生并不像火车要通过每个站似的经过每一个生活阶段，人生总是要向前走，从不留下什么</p>
                </div>
                <div id="panel4">
                    <img src="./img/微信图片_20250507170144.jpg" alt="">
                    <p>良好的健康状况和适度的身体训练，是有效的脑力劳动的重要条件</p>
                </div>
                <div id="panel5">
                    <img src="./img/微信图片_202505071701441.jpg" alt="">
                    <p>管理的第一目标是使较高工资与较低的劳动成本结合在一起</p>
                </div>
            </div>
        </div>
    </div>
    <script src="./jQuery-3.7.1.js"></script>
    <script>
        var margins = {
             panel1:0,
             panel2:-500,
             panel3:-1000,
             panel4:-1500,
             panel5:-2000,
        }
        $('#nav a').click(function(e){
            // 禁用a标签自带的跳转功能
            e.preventDefault()

            // 将字符串分割为数组
            let title = $(this).attr('href').replace(/#/g,'')
            $('#slider').animate({
                "margin-left":`${margins[title]}px`
            },'slow')
        })

        // 隐藏p标签
        $('p').hide()
        // 鼠标移入移出
        $('#slider img').hover(function(){
            $(this).next().show()
        },function(){
            $(this).next().hide()
        })
    </script>
</body>

</html>